<template>
  <a-layout>
    <a-layout-header class="header"> </a-layout-header>
    <a-layout>
      <a-layout-sider width="200" style="background: #fff">
        <a-menu
          v-model:selectedKeys="selectedKeys2"
          v-model:openKeys="openKeys"
          mode="inline"
          :style="{ height: '100%', borderRight: 0 }"
        >
          <a-sub-menu key="sub1">
            <template #title>
              <span>
                <user-outlined />
                教代会管理系统
              </span>
            </template>
            <a-menu-item key="1" @click="router.push('/')"
              >届次管理</a-menu-item
            >
            <a-menu-item key="2" @click="router.push('/mechanism')"
              >机构设置</a-menu-item
            >
            <a-menu-item key="3" @click="router.push('/contingent')"
              >代表团设置</a-menu-item
            >

            <a-menu-item key="5" @click="router.push('/management')"
              >代表管理</a-menu-item
            >
            <a-menu-item key="6" @click="router.push('/wangEditor')"
              >wangEditor</a-menu-item
            >
          </a-sub-menu>
          <a-sub-menu key="sub2">
            <template #title>
              <span>
                <user-outlined />
                提案办理
              </span>
            </template>
            <a-menu-item key="1" @click="router.push('/overtrueConfig')"
              >提案状态管理</a-menu-item
            >
            <a-menu-item key="2" @click="router.push('/setOvertrueConfig')"
              >提案配置管理</a-menu-item
            >

            <template v-for="item in menus" :key="item._id">
              <a-menu-item
                v-if="item.isShow"
                :key="item._id"
                @click="router.push(item.path)"
              >
                {{ item.name }}
              </a-menu-item>
            </template>
          </a-sub-menu>
          <a-sub-menu key="sub3">
            <template #title>
              <span>
                <user-outlined />
                信息公开
              </span>
            </template>
            <a-menu-item key="1" @click="router.push('/uploadFile')">
              公开列表
            </a-menu-item>
            <a-menu-item key="2" @click="router.push('/disclosure/apply')">
              申请公开
            </a-menu-item>
            <a-menu-item
              key="3"
              @click="router.push('/disclosure/applyMessage')"
            >
              留言回复
            </a-menu-item>
            <a-menu-item key="4" @click="router.push('/disclosure/MyMessage')">
              我的留言
            </a-menu-item>
            <a-menu-item key="5" @click="router.push('/workHome')">
              教工之家
            </a-menu-item>
            <a-menu-item key="6" @click="router.push('/cockpit')">
              领导驾驶舱
            </a-menu-item>
            <a-sub-menu key="sub4">
              <template #title>
                <span>
                  <user-outlined />
                  双层教代会
                </span>
              </template>
              <a-menu-item
                key="10"
                @click="router.push('/SecondLevelCongress/request')"
              >
                会议请示
              </a-menu-item>
              <a-menu-item
                key="11"
                @click="router.push('/SecondLevelCongress/approval')"
              >
                会议批复
              </a-menu-item>
              <a-menu-item
                key="12"
                @click="router.push('/SecondLevelCongress/list')"
              >
                会议阅览
              </a-menu-item>
            </a-sub-menu>
          </a-sub-menu>
          <a-sub-menu key="sub5">
            <template #title>
              <span>
                <user-outlined />
                经费管理
              </span>
            </template>
            <a-sub-menu key="sub51">
              <template #title>
                <span>
                  <user-outlined />
                  预算管理
                </span>
              </template>
              <a-menu-item
                key="511"
                @click="router.push('/funds/budget/allocate')"
              >
                年度经费下拨
              </a-menu-item>
              <a-menu-item
                key="512"
                @click="router.push('/funds/budget/budgetApply')"
              >
                专项经费申请
              </a-menu-item>
              <a-menu-item
                key="513"
                @click="router.push('/funds/budget/budgetAprove')"
              >
                专项经费审批
              </a-menu-item>
              <a-menu-item
                key="514"
                @click="router.push('/funds/budget/remainder')"
              >
                预算额度查询
              </a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="sub52">
              <template #title>
                <span>
                  <user-outlined />
                  费用报销
                </span>
              </template>
              <a-menu-item
                key="516"
                @click="router.push('/funds/expense/expenseApply')"
              >
                报销申请
              </a-menu-item>
              <a-menu-item
                key="517"
                @click="router.push('/funds/expense/expenseApprove')"
              >
                报销审批
              </a-menu-item>
              <a-menu-item
                key="518"
                @click="router.push('/funds/expense/expenseRecord')"
              >
                报销记录
              </a-menu-item>
            </a-sub-menu>
            <a-menu-item key="519" @click="router.push('/funds/contribution')">
              会员缴费
            </a-menu-item>
            <a-menu-item key="520" @click="router.push('/funds/charitable')">
              慈善捐款
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout>
        <a-layout-content :style="{ background: '#f4f7f9', padding: '10px' }">
          <a-config-provider :locale="zhCN">
            <router-view></router-view>
          </a-config-provider>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script lang="ts" setup>
import { UserOutlined } from "@ant-design/icons-vue";
import { ref, onMounted } from "vue";
import zhCN from "ant-design-vue/es/locale/zh_CN";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import { useMenusStore } from "@/store/index";
import { useRouter } from "vue-router";
// import { http } from "@/utils/http";
const router = useRouter();
const menuStore = useMenusStore();
const menus = ref<any[]>([]);
// const { menus } = storeToRefs(menuStore)

dayjs.locale("zh-cn");
const selectedKeys2 = ref<string[]>([""]);
// const collapsed = ref<boolean>(false);
const openKeys = ref<string[]>(["sub5"]);

onMounted(async () => {
  const res = await menuStore.getMenus();

  menus.value = res
    .filter(i => !i.hidden)
    .sort((a, b) => (a.order || 0) - (b.order || 0));
  console.log(res);
});
</script>
<style lang="less" scoped>
.ant-layout {
  height: calc(100%);
}
#components-layout-demo-top-side-2 .logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.3);
}

.ant-row-rtl #components-layout-demo-top-side-2 .logo {
  float: right;
  margin: 16px 0 16px 24px;
}

.site-layout-background {
  // background: #fff;
  background-color: pink;
}
:deep(.ant-layout-sider) {
  overflow-y: auto;
  overflow-x: hidden;
  background-color: pink;
}
::-webkit-scrollbar-thumb {
  width: 1px;
  border-radius: 10px;
  background: transparent;
  // 添加 vertical ，单独设置垂直方向上的 滑块
  &:vertical {
    background-color: transparent;
  }
}
:deep(.ant-menu) {
  background-color: #fff;
}
:deep(.ant-layout-header) {
  display: none;
}
</style>
